<template>
    <div id="app">
        <div id="nav">
            <!--
                *** path和params不能搭配使用，因为不生效  ***
                path 和 query 一起使用
                name 和 params 一起使用
            -->
            <!--            编程式导航-->
            <button @click="goAbout">About</button>
            <button @click="goHello">Hello</button>
            <button @click="forward">前进</button>
            <button @click="backoff">后退</button>
            <br>
            <!--      tag="" 这个可以用任何标签-->
            <!--        声明式导航-->
            <router-link to="/" tag="li">Home</router-link>
            |
            <router-link to="/about" tag="li">About</router-link>
            |
            <!--        replace:会把上一次的路由信息给重置(清除)  简单来说就是返回上上级-->
            <router-link to="/hello" tag="li" replace>hello</router-link>
        </div>
        <!-- 默认在中间显示-->
        <router-view/>
        <!--      home在左边显示-->
        <div style="width: 50%;float: left">
            <router-view name="home"/>
        </div>
        <!--      hello在右边显示-->
        <div style="width: 50%;float: right">
            <router-view name="hello"/>
        </div>
    </div>
</template>
<script>
    export default {
        methods: {
            goAbout() {
                // this.$router.push('/about')

                this.$router.push({path: '/about', query: {a: 100}})
            },
            goHello() {
                // this.$router.push('/hello')
                //多种传参的方法 第一
                // this.$router.push({name: 'Hello', params: {num: 90}})
                //第二
                // this.$router.push({path: '/hello/30/40'})
                let id1 = 33,
                    id2 = 40;
                //第三
                this.$router.push({path: `/hello/${id1}/${id2}`})
            },
            //前进
            forward() {
                //go 根据记录来前进或者后退（）内的是正数就是前进 ，是负数就是后退
                this.$router.go(1)
            },
            //后退
            backoff() {
                this.$router.go(-1)
            }
        }
    }
</script>
<style lang="scss">
    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    $color: #42b983; /* 声明一个变量 */
    #nav {
        padding: 30px;

        li {
            font-weight: bold;
            color: #2c3e50;
            display: inline-block;
            cursor: pointer;
            /*list-style: disc;*/
            /*(scss)& 父级选择器*/
            &.router-link-exact-active {
                color: $color;
                /*    直接变量名来*/
            }
        }
    }
</style>
